<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue学习</title>
		
	</head>
	<body>
		<div id="app">
		    <router-link to="/user">用户</router-link>
			<router-link to="/goods">商品</router-link>
			<!--占位符-->
			<router-view></router-view>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
		<script type="text/javascript">
		//定义组件
		    let User = {
				template: `
				  <h2>用户</h2>
				`
			}
			let Goods = {
				template: `
				  <div>
					<router-link to="/goods/lingshi">零食</router-link>
					<router-link to="/goods/shuiguo">水果</router-link>
					<!--占位符-->
					<router-view></router-view>
				  </div>
				`
			}
			let LS = {
					template: `
				  <h2>零食</h2>
				`
				}
			let SG = {
					template: `
				  <h2>水果</h2>
				`
				}
			//定义router对象
			const router = new VueRouter({
				routes: [
					{ path: '/user', component: User },
					{ 
						path: '/goods', 
						component: Goods,
						children:[
							{path: '/goods/lingshi',component: LS},
							{path: '/goods/shuiguo', component: SG }
						]
					}
				]
			})
			let app = new Vue({
				el: '#app',
				router,
				data: {
					message: 'Hello Vue',
				}
			})
		</script>

	</body>
</html>
